<template>
	<el-drawer :append-to-body="true" title="抄送人设置" v-model="visible" @open="openEvent" class="set_copyer"
		:show-close="false" :size="550" :before-close="saveCopyer">
		
		<template #header="{ close, titleId, titleClass }">
			<title-handler :node-config="copyerConfig"></title-handler>
		</template>

		<el-tabs type="border-card">
			<el-tab-pane label="设置抄送人">
				<user-config :approver-config="copyerConfig" :exclude-assign-type="[11, 4, 12, 14]"></user-config>
			</el-tab-pane>
			<el-tab-pane label="表单权限">
				<form-perm :hide-key="['E']" :form-perm="copyerConfig.formPerms"></form-perm>
			</el-tab-pane>
		</el-tabs>

	</el-drawer>
</template>
<script setup>
// TODO: 流程模版：抄送节点-设置页面
import $func from '../../utils/index'
import { useStore } from '../../stores/index'
import { ref, watch, computed } from 'vue'
import UserConfig from './components/userConfig.vue'
import { useFlowStore } from '../../stores/flow'
import FormPerm from './components/formPerm.vue'
import TitleHandler from "./components/titleHandler.vue";
import { nodeData } from "../../utils/const.js";
import { deepCopy } from "../../utils/objutil.js";

let copyerConfig = ref({})
let flowStore = useFlowStore();

const step2FormList = computed(() => {
	let step2 = flowStore.step2;
	return step2;
})

let store = useStore()
let { setCopyerConfig, setCopyer } = store
let copyerDrawer = computed(() => store.copyerDrawer)
let copyerConfig1 = computed(() => store.copyerConfig1)
let visible = computed({
	get() {
		return copyerDrawer.value
	},
	set() {
		closeDrawer()
	}
})

watch(copyerConfig1, (val) => {
	copyerConfig.value = { ...deepCopy(nodeData[val.value.type]), ...val.value };
})

const openEvent = () => {
	let value = step2FormList.value;
	var arr = {};
	let formPerms = copyerConfig.value.formPerms;

	for (var item of value) {
		arr[item.id] = "R"

		if (formPerms[item.id]) {
			arr[item.id] = formPerms[item.id]
		}
	}
	copyerConfig.value.formPerms = arr;
}

const saveCopyer = () => {
	copyerConfig.value.error = !$func.checkCopy(copyerConfig.value).ok;
	copyerConfig.value.errorMsg = $func.checkCopy(copyerConfig.value).msg;
	setCopyerConfig({
		value: copyerConfig.value,
		flag: true,
		id: copyerConfig1.value.id
	})
	closeDrawer();
}

const closeDrawer = () => {
	setCopyer(false)
}
</script>

<style lang="less" scoped></style>
